// index.js - 暗黑模式切换与移动菜单功能

// DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 暗黑模式切换功能
    const themeToggle = document.getElementById('theme-toggle');
    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
    
    // 切换主题函数
    function toggleTheme() {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
    }
    
    // 初始化主题
    function initTheme() {
        const savedTheme = localStorage.getItem('theme');
        const systemPrefersDark = prefersDarkScheme.matches;
        
        if (savedTheme) {
            document.documentElement.setAttribute('data-theme', savedTheme);
        } else if (systemPrefersDark) {
            document.documentElement.setAttribute('data-theme', 'dark');
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
        }
    }
    
    // 事件监听
    if (themeToggle) {
        themeToggle.addEventListener('click', toggleTheme);
    }
    
    // 移动菜单功能
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const nav = document.querySelector('.nav');
    
    function toggleMobileMenu() {
        const isExpanded = mobileMenuToggle.getAttribute('aria-expanded') === 'true';
        mobileMenuToggle.setAttribute('aria-expanded', !isExpanded);
        mobileMenuToggle.classList.toggle('active');
        nav.classList.toggle('active');
    }
    
    if (mobileMenuToggle && nav) {
        mobileMenuToggle.addEventListener('click', toggleMobileMenu);
    }
    
    // 标签页切换功能
    const tabButtons = document.querySelectorAll('.tabs__btn');
    const tabPanes = document.querySelectorAll('.tabs__pane');
    
    function switchTab(e) {
        e.preventDefault();
        
        // 移除所有按钮的激活状态
        tabButtons.forEach(button => {
            button.classList.remove('tabs__btn--active');
        });
        
        // 移除所有面板的激活状态
        tabPanes.forEach(pane => {
            pane.classList.remove('tabs__pane--active');
        });
        
        // 激活当前按钮
        this.classList.add('tabs__btn--active');
        
        // 显示对应面板
        const targetPane = document.getElementById(`${this.dataset.tab}-tab`);
        if (targetPane) {
            targetPane.classList.add('tabs__pane--active');
        }
    }
    
    // 添加标签页切换事件
    tabButtons.forEach(button => {
        button.addEventListener('click', switchTab);
    });
    
    // 初始化主题
    initTheme();
});